<template>
  <div :id="id" style="width: 500px; height: 300px;position: absolute;left: 0;right: 0;margin: auto" :ref="id"></div>
</template>

<script>
  export default {
    name: "MyEchart",
    props: ['id','options'],
    methods: {
      drawLine(){
        // console.log('开始画图')
        // // 基于准备好的dom，初始化echarts实例
        let bar_dv = this.$refs[this.id]
        if (!bar_dv) return
        let myChart = this.$echarts.init(document.getElementById(this.id))
        console.log('drawLine()',this.options)
        myChart.setOption(this.options)
      }
    },
    mounted() {
      this.drawLine()
    },
    watch: {
      data(newVal) {
        // this.drawLine()
        console.log('data改变',newVal)
        // this.drawLine(newVal)
      }
    }
  }
</script>

<style scoped>
.myChart {
  background-color: red;
}
</style>